<template>
  <div class="filters-container">
    <el-form
      :inline="true"
      :model="filterData"
      size="small"
      class="filter-form-inline"
    >
      <el-row
        :gutter="20"
        style="width:100%;margin-left: 0px; margin-right: 0px"
      >
        <el-col
          :xs="5"
          :lg="6"
          style="max-width: 50%"
        >
          <el-form-item
            label="考核周期"
            prop="assessPeriod"
          >
            <el-date-picker
              v-model="filterData.assessPeriod"
              style="width:100%"
              type="monthrange"
              range-separator="至"
              start-placeholder="开始月份"
              end-placeholder="结束月份"
            />
          </el-form-item>
        </el-col>
        <el-col
          :xs="5"
          :lg="6"
          style="max-width: 50%"
        >
          <el-form-item
            label="考核类型"
            prop="assessType"
          >
            <el-select
              v-model="filterData.assessType"
              placeholder="请选择"
            >
              <el-option
                v-for="item in assessTypeoptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col
          :xs="5"
          :lg="6"
          style="max-width: 50%"
        >
          <el-form-item
            v-if="filterData.assessType==='user'"
            label="职员姓名"
            prop="headId"
          >
            <el-select
              v-model="filterData.headId"
              clearable
              style="width: 100%"
              placeholder="负责营销职员"
              @change="handlSearch"
              @clear="()=>queryParams.headId=undefined"
            >
              <el-option
                v-for="(item, idx) in officeClerkOption"
                :key="item.id"
                :label="item.realName"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            v-if="filterData.assessType==='department'"
            label="部门"
            prop="departmentId"
          >
            <el-cascader
              ref="cascader"
              v-model="filterData.departmentId"
              style="width: 100%"
              :popper-append-to-body="false"
              :options="departmentOption"
              :props="{checkStrictly: true,expandTrigger: 'hover',label: 'deptName',value: 'id'}"
              :show-all-levels="false"
              placeholder="请选择负责部门"
            />
          </el-form-item>
          <el-form-item
            v-if="filterData.assessType==='saleArea'"
            label="营销区域"
            prop="saleAreaId"
          >
            <el-cascader
              ref="cascader"
              v-model="filterData.saleAreaId"
              style="width: 100%"
              :popper-append-to-body="false"
              :options="saleAreaOption"
              :props="{checkStrictly: true,expandTrigger: 'hover',label: 'deptName',value: 'id'}"
              :show-all-levels="false"
              placeholder="请选择负责部门"
            />
          </el-form-item>
        </el-col>
        <el-col
          :xs="2"
          :lg="3"
          style="max-width: 140px"
        >
          <el-form-item style="width:140px">
            <el-button class="border-btn">重置</el-button>
            <el-button
              type="primary"
              class="main-btn"
            >搜索</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
  <table-view
    header-cell-class-name="table-header"
    :data="listData"
    border
  >
    <el-table-column
      prop="userName"
      label="职员姓名"
      fixed="left"
      :min-width="140"
      show-overflow-tooltip
      header-align="center"
    />
    <el-table-column
      prop="departmentName"
      label="部门"
      header-align="center"
      :min-width="150"
      show-overflow-tooltip
    />
    <el-table-column
      :min-width="150"
      show-overflow-tooltip
      prop="region"
      label="负责营销区域"
      header-align="center"
    >
      <template #default="scope">
        <span>西南大区</span>
      </template>
    </el-table-column>
    <el-table-column
      :min-width="200"
      show-overflow-tooltip
      label="考核指标权重"
      align="center"
      header-align="center"
    >
      <template #default="scope">
        <el-table-column
          :min-width="100"
          label="销售额"
          align="center"
          header-align="center"
        >
          <template #default="scope">
            <span>0.8</span>
          </template>
        </el-table-column>
        <el-table-column
          :min-width="100"
          label="回款"
          align="center"
          header-align="center"
        >
          <template #default="scope">
            <span>0.5</span>
          </template>
        </el-table-column>
      </template>
    </el-table-column>
    <el-table-column
      label="月销售目标（元）"
      :min-width="140"
      show-overflow-tooltip
      header-align="center"
      align="right"
    >
      <template #default="scope">
        <span>1,200</span>
      </template>
    </el-table-column>
    <el-table-column
      label="本月销售额（元）"
      :min-width="140"
      show-overflow-tooltip
      header-align="center"
      align="right"
    >
      <template #default="scope">
        <span>1,000</span>
      </template>
    </el-table-column>
    <el-table-column
      label="完成百分比"
      :min-width="120"
      show-overflow-tooltip
      header-align="center"
      align="right"
    >
      <template #default="scope">
        <span>80%</span>
      </template>
    </el-table-column>
    <el-table-column
      label="回款目标（元）"
      :min-width="120"
      show-overflow-tooltip
      header-align="center"
      align="right"
    >
      <template #default="scope">
        <span>20,000</span>
      </template>
    </el-table-column>
    <el-table-column
      label="本月回款（元）"
      :min-width="120"
      show-overflow-tooltip
      header-align="center"
      align="right"
    >
      <template #default="scope">
        <span>20,000</span>
      </template>
    </el-table-column>
    <el-table-column
      label="完成百分比"
      :min-width="120"
      show-overflow-tooltip
      header-align="center"
      align="right"
    >
      <template #default="scope">
        <span>100%</span>
      </template>
    </el-table-column>
    <el-table-column
      label="考核结果"
      :min-width="120"
      show-overflow-tooltip
      header-align="center"
      align="right"
      fixed="right"
    >
      <template #default="scope">
        <span>87.6</span>
      </template>
    </el-table-column>
  </table-view>
  <Pagination
    v-model:page="filterData.page"
    v-model:limit="filterData.pageSize"
    style="display: flex; justify-content: flex-end"
    :total="total"
    @pagination="handlList"
  />

</template>

<script>
import {reactive, toRefs} from 'vue'
import {crmStore} from '@CRM/store'

export default {
  setup() {
    const data = reactive({
      mode: 'agent',
      listData: [],
      total: 0,
      filterData: {
        assessType: 'user',
        assessPeriod: [new Date(), new Date()],
        headId: undefined,
        departmentId: undefined,
        saleAreaId: undefined,
        page: 1,
        pageSize: 20,
      },
      officeClerkOption: crmStore.getters['company/getHeadOptions'],
      assessTypeoptions: [
        { label: '人员', value: 'user' },
        { label: '营销区域', value: 'saleArea' },
        { label: '部门', value: 'department' },
      ],
      departmentOption: [],
      saleAreaOption: [],
    })

    // 单机表格
    const rowClick = (row, column, event) => {
      console.log(row, column, event)
      if (column.label === '操作') return
    }

    // 鼠标样式
    const cellStyle = () => {
      return 'cursor:pointer;'
    }

    const handlList = () => {
      console.log('获取列表数据')
    }

    // 搜索
    const handlSearch = () => {
      data.filterData.page = 1
      handlList()
    }

    return {
      ...toRefs(data),
      rowClick,
      cellStyle,
      handlList,
      handlSearch,
    }
  },
}
</script>

<style lang="scss" scoped>
</style>
